(no subject)

Important mainly because it was sent directly to you.
Click to teach Gmail this conversation is not important.
Inbox

Duval Thompson duvalthompson9@gmail.com

3:00 PM (3 hours ago)
to me
Listen
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Mania Quiz</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            touch-action: manipulation;
        }
        .card {
            background-color: white;
            border-radius: 1.5rem;
            padding: 2rem;
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .btn {
            transition: all 0.2s ease-in-out;
            transform: scale(1);
        }
        .btn:hover {
            transform: scale(1.05);
        }
        .btn:active {
            transform: scale(0.98);
        }
        .btn-correct {
            background-color: #22c55e !important; /* green-500 */
            color: white !important;
            border-color: #16a34a !important;
        }
        .btn-incorrect {
            background-color: #ef4444 !important; /* red-500 */
            color: white !important;
            border-color: #dc2626 !important;
        }
        .logo-container {
            height: 120px;
            width: 120px;
        }
        .logo-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

    <div id="game-container" class="w-full max-w-2xl mx-auto">

        <!-- Start Screen -->
        <div id="start-screen" class="text-center">
            <div class="card">
                <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Car Mania Quiz</h1>
                <p class="text-gray-600 text-lg mb-8">Choose a game mode to test your car knowledge!</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button id="start-logo-quiz" class="btn w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">
                        Match the Logo
                    </button>
                    <button id="start-model-quiz" class="btn w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">
                        Match the Model
                    </button>
                     <button id="start-part-quiz" class="btn w-full md:col-span-2 bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">
                        Match the Part
                    </button>
                </div>
                <div class="mt-6">
                    <button id="edit-cars-btn" class="btn w-full md:w-auto bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-5 rounded-lg text-md shadow-lg">
                        Edit Car List
                    </button>
                    <button id="edit-parts-btn" class="btn w-full md:w-auto bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-5 rounded-lg text-md shadow-lg mt-2 md:mt-0 md:ml-2">
                        Edit Part List
                    </button>
                </div>
            </div>
        </div>

        <!-- Game Screen -->
        <div id="game-screen" class="hidden">
            <div class="card">
                <div class="flex justify-between items-center mb-6">
                    <h2 id="quiz-title" class="text-2xl font-bold text-gray-800"></h2>
                    <div class="text-lg font-semibold text-gray-700">
                        Score: <span id="score">0</span>
                    </div>
                </div>
                <div id="question-container" class="text-center mb-8">
                    <!-- Logo Quiz Content -->
                    <div id="logo-question-content" class="hidden flex flex-col items-center">
                         <p class="text-xl text-gray-600 mb-4">Which car brand is this?</p>
                        <div id="logo-display" class="logo-container mx-auto mb-6 flex items-center justify-center"></div>
                    </div>
                    <!-- Model Quiz Content -->
                    <div id="model-question-content" class="hidden flex flex-col items-center">
                        <p class="text-xl text-gray-600 mb-2">Which manufacturer makes the</p>
                        <h3 id="model-name" class="text-4xl font-bold text-blue-600"></h3>
                    </div>
                    <!-- Part Quiz Content -->
                    <div id="part-question-content" class="hidden flex flex-col items-center">
                         <p class="text-xl text-gray-600 mb-4">What is this car part?</p>
                        <div id="part-display" class="logo-container mx-auto mb-6 flex items-center justify-center"></div>
                    </div>
                </div>
                <div id="answers-container" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Answer buttons will be injected here -->
                </div>
                 <div id="feedback-container" class="mt-6 text-center h-8">
                    <p id="feedback-message" class="text-xl font-semibold"></p>
                </div>
            </div>
        </div>

        <!-- End Screen -->
        <div id="end-screen" class="hidden">
            <div class="card text-center">
                <h2 class="text-4xl font-bold text-gray-800 mb-4">Game Over!</h2>
                <p class="text-2xl text-gray-600 mb-2">Your final score is:</p>
                <p id="final-score" class="text-6xl font-extrabold text-blue-600 mb-8"></p>
                <div class="flex flex-col md:flex-row gap-4 justify-center">
                    <button id="play-again" class="btn bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Play Again</button>
                </div>
            </div>
        </div>

        <!-- Edit Screen -->
        <div id="edit-screen" class="hidden">
            <div class="card">
                <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Edit Car List</h2>
                <div id="car-list-container" class="space-y-4 mb-6 max-h-96 overflow-y-auto p-2 bg-gray-50 rounded-lg">
                    <!-- Car list will be rendered here -->
                </div>
                <div class="flex flex-col md:flex-row gap-4 justify-center">
                    <button id="add-new-car-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Add New Car</button>
                    <button id="back-to-menu-btn" class="btn bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Back to Menu</button>
                </div>
            </div>
        </div>

        <!-- Edit Parts Screen -->
        <div id="edit-parts-screen" class="hidden">
            <div class="card">
                <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Edit Part List</h2>
                <div id="part-list-container" class="space-y-4 mb-6 max-h-96 overflow-y-auto p-2 bg-gray-50 rounded-lg">
                    <!-- Part list will be rendered here -->
                </div>
                <div class="flex flex-col md:flex-row gap-4 justify-center">
                    <button id="add-new-part-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Add New Part</button>
                    <button id="back-to-menu-from-parts-btn" class="btn bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Back to Menu</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add/Edit Car Modal -->
    <div id="edit-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
        <div class="card w-full max-w-lg">
            <h3 id="modal-title" class="text-2xl font-bold text-gray-800 mb-4">Add New Car</h3>
            <p id="modal-error" class="text-red-500 text-sm mb-2 hidden"></p>
            <form id="edit-form">
                <div class="mb-4">
                    <label for="brand-name-input" class="block text-gray-700 font-semibold mb-2">Brand Name</label>
                    <input type="text" id="brand-name-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required>
                </div>
                <div class="mb-4">
                    <label for="logo-url-input" class="block text-gray-700 font-semibold mb-2">Logo Image URL</label>
                    <input type="text" id="logo-url-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg font-mono text-sm" required>
                </div>
                <div class="mb-4">
                    <label for="models-input" class="block text-gray-700 font-semibold mb-2">Models (comma-separated)</label>
                    <input type="text" id="models-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="e.g. Model A, Model B, Model C" required>
                </div>
                <div class="flex justify-end gap-4">
                    <button type="button" id="cancel-edit-btn" class="btn bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">Cancel</button>
                    <button type="submit" id="save-edit-btn" class="btn bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add/Edit Part Modal -->
    <div id="edit-part-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
        <div class="card w-full max-w-lg">
            <h3 id="part-modal-title" class="text-2xl font-bold text-gray-800 mb-4">Add New Part</h3>
            <p id="part-modal-error" class="text-red-500 text-sm mb-2 hidden"></p>
            <form id="edit-part-form">
                <div class="mb-4">
                    <label for="part-name-input" class="block text-gray-700 font-semibold mb-2">Part Name</label>
                    <input type="text" id="part-name-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required>
                </div>
                <div class="mb-4">
                    <label for="part-image-url-input" class="block text-gray-700 font-semibold mb-2">Image URL</label>
                    <input type="text" id="part-image-url-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg font-mono text-sm" required>
                </div>
                <div class="flex justify-end gap-4">
                    <button type="button" id="cancel-part-edit-btn" class="btn bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">Cancel</button>
                    <button type="submit" id="save-part-edit-btn" class="btn bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>
                </div>
            </form>
        </div>
    </div>


    <script>
        // DOM Elements
        const startScreen = document.getElementById('start-screen');
        const gameScreen = document.getElementById('game-screen');
        const endScreen = document.getElementById('end-screen');
       
        const startLogoQuizBtn = document.getElementById('start-logo-quiz');
        const startModelQuizBtn = document.getElementById('start-model-quiz');
        const startPartQuizBtn = document.getElementById('start-part-quiz');
        const playAgainBtn = document.getElementById('play-again');

        const quizTitle = document.getElementById('quiz-title');
        const scoreDisplay = document.getElementById('score');
        const questionContainer = document.getElementById('question-container');
        const logoQuestionContent = document.getElementById('logo-question-content');
        const modelQuestionContent = document.getElementById('model-question-content');
        const partQuestionContent = document.getElementById('part-question-content');
        const logoDisplay = document.getElementById('logo-display');
        const modelNameDisplay = document.getElementById('model-name');
        const partDisplay = document.getElementById('part-display');
        const answersContainer = document.getElementById('answers-container');
        const finalScoreDisplay = document.getElementById('final-score');
        const feedbackMessage = document.getElementById('feedback-message');

        const editScreen = document.getElementById('edit-screen');
        const editCarsBtn = document.getElementById('edit-cars-btn');
        const carListContainer = document.getElementById('car-list-container');
        const addNewCarBtn = document.getElementById('add-new-car-btn');
        const backToMenuBtn = document.getElementById('back-to-menu-btn');

        const editPartsBtn = document.getElementById('edit-parts-btn');
        const editPartsScreen = document.getElementById('edit-parts-screen');
        const partListContainer = document.getElementById('part-list-container');
        const addNewPartBtn = document.getElementById('add-new-part-btn');
        const backToMenuFromPartsBtn = document.getElementById('back-to-menu-from-parts-btn');

        const editModal = document.getElementById('edit-modal');
        const editForm = document.getElementById('edit-form');
        const cancelEditBtn = document.getElementById('cancel-edit-btn');
        const brandNameInput = document.getElementById('brand-name-input');
        const logoUrlInput = document.getElementById('logo-url-input');
        const modelsInput = document.getElementById('models-input');
        const modalError = document.getElementById('modal-error');

        const editPartModal = document.getElementById('edit-part-modal');
        const editPartForm = document.getElementById('edit-part-form');
        const cancelPartEditBtn = document.getElementById('cancel-part-edit-btn');
        const partNameInput = document.getElementById('part-name-input');
        const partImageUrlInput = document.getElementById('part-image-url-input');
        const partModalError = document.getElementById('part-modal-error');


        // --- CAR DATA ---
        // This is now the default data if nothing is in localStorage.
        const defaultCarData = {
            logoQuiz: [
                { name: 'Tesla', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/e/e8/Tesla_logo.png' },
            ],
            modelQuiz: [
                { make: 'Toyota', models: ['Camry', 'Corolla', 'RAV4', 'Highlander', 'Prius'] },
                { make: 'Ford', models: ['Mustang', 'F-150', 'Explorer', 'Escape', 'Focus'] },
                { make: 'Honda', models: ['Civic', 'Accord', 'CR-V', 'Pilot', 'Odyssey'] },
                { make: 'Chevrolet', models: ['Silverado', 'Equinox', 'Malibu', 'Camaro', 'Tahoe'] },
                { make: 'Tesla', models: ['Model 3', 'Model S', 'Model X', 'Model Y', 'Cybertruck'] },
                { make: 'BMW', models: ['3 Series', '5 Series', 'X3', 'X5', 'M3'] },
                { make: 'Mercedes-Benz', models: ['C-Class', 'E-Class', 'S-Class', 'GLC', 'GLE'] },
                { make: 'Audi', models: ['A4', 'A6', 'Q5', 'Q7', 'R8'] },
                { make: 'Volkswagen', models: ['Jetta', 'Passat', 'Tiguan', 'Golf', 'Atlas'] },
                { make: 'Subaru', models: ['Outback', 'Forester', 'Crosstrek', 'Impreza', 'WRX'] },
                { make: 'Nissan', models: ['Altima', 'Sentra', 'Rogue', 'Titan', 'Leaf'] }
            ],
            partQuiz: [
                 { name: 'Engine', imageURL: '
...

[Message clipped]  View entire message